<template>
  <el-row class="panel max-w-736">
		<el-col :span="24" class="panel-center">
			<section class="panel-c-c" >
				<div class="grid-content bg-purple-light">
            <el-col :span="24">
              <transition name="fade" mode="out-in" appear>
                <router-view></router-view>
              </transition>
            </el-col>
				</div>
			</section>
		</el-col>
	</el-row>

</template>

<style>

  .panel {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
  }

  .panel-center {
    background: #324057;
    position: absolute;
    top: 30px;
    bottom: 0px;
    overflow: hidden;
  }

  .panel-c-c {
    background: #FFFFFF;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    overflow-y: scroll;
    padding: 20px 20px 0;
  }

</style>

<script>
  import { Row, Col, Dropdown, DropdownMenu, DropdownItem, MessageBox } from 'element-ui'
  Vue.use(Row)
  Vue.use(Col)
  Vue.use(Dropdown)
  Vue.use(DropdownMenu)
  Vue.use(DropdownItem)
  Vue.prototype.$confirm = MessageBox.confirm

</script>
